import { Dropdown, Modal, notification } from 'antd';
import { FC } from 'react';

import { usePost } from '@/api';
import DeleteIcon from '@/assets/icons/delete.svg';
import EditIcon from '@/assets/icons/edit.svg';
import MoreIcon from '@/assets/icons/more.svg';
import PlusIcon from '@/assets/icons/plus.svg';
import { colors } from '@/config/theme';
import storage from '@/utils/storage';

import { CategoryModifyForm, CategoryModifyFormRef } from './category-modify-form';
import { FlowModifyForm } from './flow-modify-form';

interface CategoryMoreProps {
  flowName?: string;
  flowDesc?: string;
  categoryId: number;
  cateGoryInfo?: { name: string; icon: string };
  refresh: () => void;
  onAddSuccess?: (newFlowId: number) => void;
  type: 'add' | 'edit';
}

export const CategoryMore: FC<CategoryMoreProps> = memo((props) => {
  const navigate = useNavigate();
  const [deleteVisible, setDeleteVisible] = useState(false);
  const categoryModifyFormRef = useRef<CategoryModifyFormRef>(null);
  const { loading: deleteLoading, runAsync: deleteCategory } = usePost('/category/delete', {}, { manual: true });

  const submitDelete = () => {
    deleteCategory({
      id: props.categoryId
    }).then(() => {
      setDeleteVisible(false);
      storage.remove('cache-flowId');
      navigate('/flow');
      notification.success({ message: '删除成功' });
      props.refresh();
    });
  };

  return (
    <>
      <div className="flex items-center gap-8">
        <FlowModifyForm
          params={{ categoryId: props.categoryId }}
          refresh={({ id }) => {
            props.refresh();
            props.type === 'add' && props.onAddSuccess?.(id!);
          }}
          type="add">
          <PlusIcon className="w-14 h-14" fill={colors.primary[500]} />
        </FlowModifyForm>
        <Dropdown
          arrow
          menu={{
            items: [
              {
                onClick(e) {
                  e.domEvent.stopPropagation();
                  categoryModifyFormRef.current?.setVisible(true);
                  categoryModifyFormRef.current?.setFormValue({
                    categoryId: props.categoryId,
                    ...(props.cateGoryInfo! || {})
                  });
                },
                key: '0',
                label: '重命名',
                icon: <EditIcon width="18" height="18" />
              },
              {
                onClick() {
                  setDeleteVisible(true);
                },
                key: '1',
                label: <span className="text-red-500">删除</span>,
                icon: <DeleteIcon width="18" height="18" fill={colors.red[500]} />
              }
            ]
          }}>
          <div>
            <MoreIcon onClick={(e: MouseEvent) => e.stopPropagation()} width="18" height="18" fill={colors.primary[500]} />
          </div>
        </Dropdown>
      </div>

      <CategoryModifyForm ref={categoryModifyFormRef} type="edit" refresh={props.refresh} />

      <Modal
        title="提示"
        open={deleteVisible}
        onOk={submitDelete}
        confirmLoading={deleteLoading}
        onCancel={() => setDeleteVisible(false)}>
        <p>是否确定删除目录？该目录下的所有决策都将会被删除。</p>
      </Modal>
    </>
  );
});
